<template>
  <div>
    <!-- 面包袕 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card>
      <!-- 第一行 -->
      <el-row>
        <el-col>
          <el-button type="primary">新增角色</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="roleList" border stripe row-key="id">
        <!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- 遍历当前角色的一级权限 -->
            <el-row
              :class="[
                'bottomBorder',
                index == 0 ? 'topBorder' : '',
                'vcenter',
              ]"
              v-for="(item1, index) in scope.row.children"
              :key="item1.id"
            >
              <!-- 1 -->
              <el-col :span="5">
                <el-tag closable @close="dekRights(scope.row, item1.id)">{{
                  item1.authName
                }}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="19">
                <!-- 2 -->
                <el-row
                  :class="[i2 == 0 ? '' : 'topBorder', 'vcenter']"
                  v-for="(item2, i2) in item1.children"
                  :key="item2.id"
                >
                  <el-col :span="6">
                    <el-tag
                      type="success"
                      closable
                      @close="dekRights(scope.row, item2.id)"
                      >{{ item2.authName }}</el-tag
                    >
                    <i class="el-icon-caret-right"></i>
                  </el-col>

                  <el-col :span="18">
                    <el-tag
                      type="warning"
                      v-for="item3 in item2.children"
                      :key="item3.id"
                      closable
                      @close="dekRights(scope.row, item3.id)"
                      >{{ item3.authName }}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <!-- 序号列 -->
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="roleName" label="角色名字"></el-table-column>
        <el-table-column prop="roleDesc" label="说明"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="delRolesID(scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-setting"
              @click="ShowRigthsList(scope.row)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分配权限对话框 -->
      <el-dialog title="分配权限" :visible.sync="isShowRights" width="50%">
        <!-- 树形控件 -->
        <el-tree
          :data="rowshowlist"
          :props="treeprops"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="checkdKeys"
          ref="refkeysid"
        ></el-tree>

        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowRights = false">取 消</el-button>
          <el-button type="primary" @click="setRoleRights">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  created () {
    this.getRoleList()
  },
  data () {
    return {
      // 角色列表
      roleList: [],
      // 分配权限显示
      isShowRights: false,
      // 分配权限内容
      rowshowlist: [],
      // 树形菜单的名字  属性名
      treeprops: {
        children: 'children',
        label: 'authName'
      },
      // 树形菜单中默认选择的参数
      checkdKeys: [],
      // 角色id
      RowsId: ''
    }
  },
  methods: {
    //   获取角色列表
    async getRoleList () {
      const { data: resData } = await this.$http.get('roles')
      //   失败
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      // 成功
      this.roleList = resData.data
      this.$message.success(resData.meta.msg)
      // console.log(this.roleList)
    },
    // 删除ID 权限
    dekRights (rows, id) {
      this.$messageBox.confirm('你确定删除吗~', {
        confirmButtonText: '确定',
        callback: async (action) => {
          // 如果点击是取消
          if (action === 'cancel') return
          // 如果点击确认 就是删除 当前ID 的权限接口
          const { data: resData } = await this.$http.delete(
            `roles/${rows.id}/rights/${id}`
          )
          // 判断删除结果
          if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
          // 如果删除成功 就重新渲染
          this.$message.success(resData.meta.msg)
          // 把原来的权限 重新赋值为删除后剩余的权限
          rows.children = resData.data
        }
      })
    },
    // 打开分配权限 窗口
    async ShowRigthsList (rowDatas) {
      // 存入角色id 用于分配权限使用
      this.RowsId = rowDatas.id
      // 清空数组
      this.checkdKeys = []
      // 点击显示窗口
      const { data: resData } = await this.$http.get('rights/tree')
      // 如果失败
      if (resData.meta.status !== 200) { return this.$$message.error(resData.meta.msg) }
      // 如果成功
      this.$message.success(resData.meta.msg)
      // 把权限内容 赋值给数组
      this.rowshowlist = resData.data
      // 传入值
      this.getListid(rowDatas.children)
      this.isShowRights = true
    },

    // 获取 三级权限id 渲染分配权限 id
    getListid (Rewid) {
      Rewid.forEach((ele) => {
        // 判断是否有 children
        if (ele.children) {
          // 就一直递归
          this.getListid(ele.children)
        } else {
          // 往空数组里面添加 三级id
          this.checkdKeys.push(ele.id)
        }
      })
    },

    // 确定分配角色 权限
    async setRoleRights () {
      // 获取全选和半选的ID  getCheckedKeys getHalfCheckedKeys 是element targ 的方法
      const a = this.$refs.refkeysid.getCheckedKeys()
      const b = this.$refs.refkeysid.getHalfCheckedKeys()
      // 全部那出来生成新数组
      const newArry = [...a, ...b]
      //  逗号分割
      const strArry = newArry.join(',')

      // 发送请求
      const { data: resData } = await this.$http.post(
        `roles/${this.RowsId}/rights`,
        {
          rids: strArry
        }
      )
      // 如果失败
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      // 成功
      this.$message.success(resData.meta.msg)
      // 重新渲染
      this.getRoleList()
      // 关闭对话框
      this.isShowRights = false
    },
    // 删除角色
    async delRolesID (strData) {
      const { data: resData } = await this.$http.delete(`roles/${strData.id}`)
      // 如果失败
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      // 如果成功
      this.$message.success(resData.meta.msg)
      this.getRoleList()
    }
  }
}
</script>

<style lang="postcss" scoped>
.el-tag {
  margin: 7px;
}
.topBorder {
  border-top: 1px solid #eee;
}
.buttomBorder {
  border-bottom: 1px solid #eee;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>
